import React, { Component } from 'react'
import Breadcrumb from '../../base/Breadcrumb'
import { withRouter } from 'react-router-dom'
import { Input, Message } from 'element-react'
import Pagination from '../../base/Pagination'
class SkuPrice extends Component {
  constructor(props) {
    super(props)
    this.state = {
      id: this.props.match.params.id || '',
      totalElements: 20,
      totalPages: 2,
      pageNo: 0,
      size: 10,
      list: []
    }
  }
  componentDidMount() {
    let productName = sessionStorage.skuName
    this.setState({productName})
    this.init({pageNo: 0, size: 10, id: Number(this.state.id)})
  }
  init (data) {
    this.$ajax.selectSkuList(data).then(res => {
      if (res.code === 200) {
        this.setState({totalElements: res.data.totalElements, totalPages: res.data.totalElements, list: res.data.content})
      } else {
        Message.error(res.msg)
      }
    }).catch(() => {
      Message.error('网络错误')
    })
  }
  changePage (value) {
    this.setState({pageNo: value - 1})
    this.init({pageNo: this.state.pageNo, size: this.state.size})
  }
  goIncrease () {
    this.props.history.push({
      pathname: `/skuPriceCreate`,
      state: { fromDashboard: true }
    })
  }
  goEdit (item) {
    sessionStorage.skuPriceItem = JSON.stringify(item)
    this.props.history.push({
      pathname: `/skuPriceEdit/${item.id}`,
      state: { fromDashboard: true }
    })
  }
  goDetail (item) {
    sessionStorage.skuPriceItem = JSON.stringify(item)
    this.props.history.push({
      pathname: `/skuPriceSee/${item.id}`,
      state: { fromDashboard: true }
    })
  }
  render() {
    return (
      <div className="skuPrice">
        <Breadcrumb data={['商品管理', '商品规格', 'sku生成页', '定价']}/>
        <div className="height40"></div>
        <div className="inputGroup flexCenterY">
          <label className="inputLabel">产品名称：</label>
          <Input placeholder="请输入产品名称" className="inputSmall" size="large" onChange={value => {this.setState({productName: value})}} value={this.state.productName}/>
        </div>
        <div className="height20"></div>
        <div><button className="btn btn-increase" onClick={this.goIncrease.bind(this)}>新增</button></div>
        <table className="table">
          <tbody>
            <tr>
              <th>价格类型</th>
              <th>价格值</th>
              <th>时间</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
            {
              this.state.list.map((a, index) => {
                return (
                  <tr key={index}>
                  <td>{a.name}</td>
                  <td>{a.price}</td>
                  <td>{a.startTime + ' 至 ' + a.endTime}</td>
                  {a.status === 0 ? <td>已上架</td> : <td>未上架</td>}
                  <td>
                    <div>
                    <div className="inputGroup">
                      <div><button className="btn btn-operate" onClick={this.goDetail.bind(this, a)}>查看</button></div>
                      <div><button className="btn btn-operate" onClick={this.goEdit.bind(this, a)}>编辑</button></div>
                    </div>
                    </div>
                  </td>
                  </tr>
                )
              })

            }
          </tbody>
        </table>
        <Pagination total={this.state.totalElements} changePage={this.changePage.bind(this)}/>
      </div>
    );
  }
}

export default withRouter(SkuPrice)